<template>
  <div class="page_padding out_add">
    <MyNavBar @goback="goback" :title="$route.query.title" />
    <div class="outduty">
      <p
        class="result_hint"
        :class="
          formData.dailyStatus == '0' ? 'r_btn_red' : formData.dailyStatus == '1' ? 'r_btn_success' : 'r_btn_primary'
        "
        v-if="formData.dailyStatus == '3' || formData.dailyStatus == '4'">
        {{ menuData(formData.dailyStatus) }}
      </p>
      <div class="self_info">
        <div class="self_title_bold">基本信息</div>
        <div class="correlation_info">
          <div class="left">申请人</div>
          <div class="right">{{ formData.userName }}</div>
        </div>
        <div class="correlation_info">
          <div class="left">部门名称</div>
          <div class="right">{{ formData.orgName }}</div>
        </div>
        <div class="correlation_info">
          <div class="left">联系电话</div>
          <div class="right">
            <van-cell-group :border="false">
              <van-field v-model="formData.mobile" placeholder="请输入" type="tel" input-align="right" maxlength="11" />
            </van-cell-group>
          </div>
        </div>
        <div class="correlation_info">
          <div class="left">申请时间</div>
          <div class="right">{{ formData.writeTime }}</div>
        </div>
      </div>
      <div class="register_info">
        <div class="self_title_bold">{{ formTitle }}信息</div>
        <div v-if="formData.formId == '1' || formData.formId == '2' || formData.formId == '3'">
          <div class="leave_time" v-if="formData.formId == '3' && !$route.query.btn && !$route.query.operate">
            <div class="out_title">
              <span class="text">关联请假单</span>
            </div>
            <div class="cell_add" @click="linkDutyCli">
              <van-cell value="点击关联请假单" />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">{{ formData.formId == '2' ? '公务外出类型' : '请假类型' }}</span>
            </div>
            <div class="cell">
              <van-dropdown-menu>
                <van-dropdown-item
                  :disabled="formData.formId == '3'"
                  v-model="leaveType"
                  :options="LeaveOption"
                  @close="dropdownChange('0')" />
              </van-dropdown-menu>
              <van-cell v-if="formData.formId !== '3'" :value="formData.leaveName ? formData.leaveName : '请选择'" />
              <van-cell v-else :value="formData.leaveName" />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">{{ formData.formId == '2' ? '预计开始时间：' : '请假开始时间：' }}</span>
            </div>
            <div class="cell" v-if="formData.formId !== '3'" @click="leaveTime('1')">
              <van-cell
                v-if="formData.formId == '1' && leaveIdList.includes(formData.leaveId)"
                :value="days.startDays ? days.startDays : '年/月/日'"
                is-link></van-cell>
              <van-cell
                v-else-if="formData.formId == '1' && (formData.leaveId == '5' || formData.leaveId == '24')"
                :value="days.startDays ? days.startDays + days.morNing : '年/月/日'"
                is-link />
              <van-cell v-else :value="formData.startTime ? formData.startTime : '年/月/日'" is-link />
            </div>
            <div class="cell" v-else>
              <van-cell :value="days.startDays" />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">{{ formData.formId == '2' ? '预计结束时间：' : '请假结束时间：' }}</span>
            </div>
            <div class="cell" v-if="formData.formId !== '3'" @click="leaveTime('2')">
              <van-cell
                v-if="formData.formId == '1' && leaveIdList.includes(formData.leaveId)"
                :value="days.endDays ? days.endDays : '年/月/日'"
                is-link></van-cell>
              <van-cell
                v-else-if="formData.formId == '1' && (formData.leaveId == '5' || formData.leaveId == '24')"
                :value="days.endDays ? days.endDays + days.afterNoon : '年/月/日'"
                is-link />
              <van-cell v-else :value="formData.endTime ? formData.endTime : '年/月/日'" is-link />
            </div>
            <div class="cell" v-else>
              <van-cell :value="days.endDays" />
            </div>
          </div>
          <div class="leave_time" v-if="formData.formId !== '2' && formData.leaveId == '25'">
            <div class="out_title">
              <span class="text">请假区间</span>
            </div>
            <div class="cell">
              <van-radio-group v-model="days.nurseTime" direction="horizontal" @change="nurseChaneg">
                <van-radio name="上午" icon-size="15px">上班后一小时</van-radio>
                <van-radio name="下午" icon-size="15px">下班前一小时</van-radio>
              </van-radio-group>
            </div>
          </div>
          <div class="leave_time add_tips" v-if="formData.formId !== '2' && formData.leaveId == '25'">
            <div class="cell">提示：“哺乳假”系统默认无需销假，您也可自行选择销假。</div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">{{ formData.formId == '2' ? '外出' : '请假' }}天数</span>
            </div>
            <div class="cell">
              <van-cell
                :value="
                  formData.calendarDays && formData.calendarDays != '0'
                    ? '工作日' + formData.regDays + '天，日历日' + formData.calendarDays + '天'
                    : '工作日' + formData.regDays + '天'
                " />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">{{ formData.formId == '2' ? '外出' : '请假' }}小时数</span>
            </div>
            <div class="cell">
              <van-cell :value="formData.regHours + '小时'" />
            </div>
          </div>
          <div class="leave_time">
            <div class="leave_title">
              <span class="text">{{ formData.formId == '2' ? '外出事由' : '请假事由' }}</span>
            </div>
            <div class="out_field">
              <van-cell-group>
                <van-field
                  :disabled="formData.formId == '3'"
                  v-model="formData.reason"
                  show-word-limit
                  maxlength="100"
                  :placeholder="formData.formId == '3' ? '' : '请输入相关内容'"
                  type="textarea"
                  rows="3"
                  autosize />
              </van-cell-group>
            </div>
          </div>
          <div class="duty_file" v-if="formData.formId == '3'">
            <div class="duty_file_title">
              <span>请假附件</span>
            </div>
            <ImgUpload :albumList="formData.enclosureList" :entry="false" />
          </div>
          <div class="leave_time" v-if="formData.formId == '3'">
            <div class="out_title">
              <span class="text">销假时间</span>
            </div>
            <div class="cell" v-if="!formData.startTime">
              <van-cell :value="formData.backTime ? formData.backTime : '年/月/日'" is-link />
            </div>
            <div class="cell" v-else @click="leaveTime('3')">
              <van-cell :value="formData.backTime ? formData.backTime : '年/月/日'" is-link />
            </div>
          </div>
          <div
            class="leave_time"
            style="flex-direction: column; justify-content: flex-start; align-items: start"
            v-if="formData.formId == '3'">
            <p style="line-height: 1.5">提示：</p>
            <p style="line-height: 1.5">1.用于请假结束后，告知负责人已返岗。(销假时间大于请假结束时间)</p>
            <p style="line-height: 1.5">
              2.用于在请假时间内已返岗，需要对请假时间进行调整。(销假时间大于开始时间小于结束时间)
            </p>
          </div>
          <div class="img_div" v-if="showFile == '2' && formData.leaveId == '24'">
            <ImgUpload
              titleWord="附件："
              :showtips="true"
              fileTips="提示：请上传原单位审批通过凭证"
              v-bind:albumList.sync="formData.enclosureList" />
          </div>

          <template v-else>
            <div class="img_div" v-if="formData.formId === '3'">
              <ImgUpload
                titleWord="附件："
                :showtips="true"
                fileTips=""
                v-bind:albumList.sync="formData.backEnclosureList" />
            </div>
            <div class="img_div" v-else>
              <ImgUpload
                titleWord="附件："
                :showtips="formData.formId != '2' && formData.leaveId == '2' ? true : false"
                :fileTips="
                  formData.formId == '1' && formData.leaveId == '2' ? '提示：请上传或在销假时上传相关病例证明文件' : ''
                "
                v-bind:albumList.sync="formData.enclosureList" />
            </div>
          </template>
          <div class="leave_time" v-if="formData.formId !== '3'">
            <div class="out_title">
              <span>顶岗人员姓名</span>
            </div>
            <div class="cell">
              <van-cell-group :border="false">
                <van-field
                  v-model="formData.replaceName"
                  placeholder="请输入"
                  type="text"
                  input-align="right"
                  maxlength="15" />
              </van-cell-group>
            </div>
          </div>
          <div class="leave_time" v-if="formData.formId !== '3'">
            <div class="out_title">
              <span>联系电话</span>
            </div>
            <div class="cell">
              <van-cell-group :border="false">
                <van-field
                  v-model="formData.replaceMobile"
                  placeholder="请输入"
                  type="tel"
                  input-align="right"
                  maxlength="20" />
              </van-cell-group>
            </div>
          </div>
          <div class="leave_time" v-if="formData.formId !== '3'">
            <div class="leave_title">
              <span>备注</span>
            </div>
            <div class="style_btn">
              <van-radio-group v-model="formData.remark1" direction="horizontal" @change="btnChanges">
                <van-radio name="出市" icon-size="15px">出市</van-radio>
                <van-radio name="出国" icon-size="15px">出国</van-radio>
                <van-radio name="其他" icon-size="15px">其他</van-radio>
              </van-radio-group>
            </div>
          </div>
          <div style="width: 100%" class="out_field" v-show="formData.remark1 === '其他' && formData.formId !== '3'">
            <van-cell-group :border="false">
              <van-field
                v-model="formData.extentName"
                show-word-limit
                maxlength="100"
                placeholder="请输入其他需要备注的内容"
                type="textarea"
                rows="3"
                autosize />
            </van-cell-group>
          </div>
          <div class="leave_time" v-if="formData.formId == '3'">
            <div class="leave_title">
              <span>备注</span>
            </div>
            <div class="out_field">
              <van-cell-group>
                <van-field
                  v-model="formData.remark"
                  show-word-limit
                  maxlength="100"
                  placeholder="请输入相关内容"
                  type="textarea"
                  rows="3"
                  autosize />
              </van-cell-group>
            </div>
          </div>
        </div>
        <div v-if="formData.formId == '4'">
          <div class="leave_time">
            <div class="out_title">
              <span class="text">加班开始时间</span>
            </div>
            <div class="cell" @click="leaveTime('4')">
              <van-cell :value="formData.startOverTime ? formData.startOverTime : '年/月/日'" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">加班结束时间</span>
            </div>
            <div class="cell" @click="leaveTime('5')">
              <van-cell :value="formData.endOverTime ? formData.endOverTime : '年/月/日'" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">加班小时数</span>
            </div>
            <div class="cell">
              <van-cell :value="formData.overHours + '小时'" />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">抵扣考勤开始时间</span>
            </div>
            <div class="cell" @click="leaveTime('1')">
              <van-cell :value="formData.startTime ? formData.startTime : '年/月/日'" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">抵扣考勤结束时间</span>
            </div>
            <div class="cell" @click="leaveTime('2')">
              <van-cell :value="formData.endTime ? formData.endTime : '年/月/日'" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="leave_title">
              <span class="text">工作事由</span>
            </div>
            <div class="out_field">
              <van-cell-group>
                <van-field
                  v-model="formData.reason"
                  placeholder="请输入相关内容"
                  show-word-limit
                  maxlength="100"
                  type="textarea"
                  rows="3"
                  autosize />
              </van-cell-group>
            </div>
          </div>
        </div>
        <div v-if="formData.formId == '5'">
          <div class="leave_time">
            <div class="out_title">
              <span class="text">补卡日期</span>
            </div>
            <div class="cell" @click="leaveTime('1')">
              <van-cell :value="formData.startTime ? formData.startTime.slice(0, 10) : '年/月/日'" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">补卡时间</span>
            </div>
            <div class="cell">
              <van-radio-group v-model="formData.selfTime" @change="supplementaryChaneg" direction="horizontal">
                <van-radio :name="workTime[0]" icon-size="15px">{{ workTime[0] }}</van-radio>
                <van-radio :name="workTime[1]" icon-size="15px">{{ workTime[1] }}</van-radio>
                <van-radio name="self" icon-size="15px">自定义</van-radio>
              </van-radio-group>
            </div>
          </div>
          <div class="leave_time" v-if="formData.selfTime === 'self'">
            <div class="out_title">
              <span class="text">选择补卡时间</span>
            </div>
            <div class="cell" @click="leaveTime('3')">
              <van-cell :value="days.selfTime ? days.selfTime : '时/分'" is-link />
            </div>
          </div>
          <div class="leave_time supplementary_drop1" :class="{ supplementary_drop2: formData.selfTime === 'self' }">
            <div class="out_title">
              <span class="text">补卡类型</span>
            </div>
            <div class="cell">
              <van-dropdown-menu>
                <van-dropdown-item
                  :disabled="formData.formId == '3'"
                  v-model="leaveType"
                  :options="LeaveOption"
                  @close="dropdownChange('1')" />
              </van-dropdown-menu>
              <van-cell :value="formData.leaveName" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="leave_title">
              <span class="text">补卡原因</span>
            </div>
            <div class="out_field">
              <van-cell-group>
                <van-field
                  :disabled="formData.formId == '3'"
                  v-model="formData.reason"
                  show-word-limit
                  maxlength="100"
                  :placeholder="formData.formId == '3' ? '' : '请输入相关内容'"
                  type="textarea"
                  rows="3"
                  autosize />
              </van-cell-group>
            </div>
          </div>
          <div class="leave_time">
            <div class="leave_title">
              <span>备注</span>
            </div>
            <div class="out_field">
              <van-cell-group>
                <van-field
                  v-model="formData.remark"
                  placeholder="请输入相关内容"
                  show-word-limit
                  maxlength="100"
                  type="textarea"
                  rows="3"
                  autosize />
              </van-cell-group>
            </div>
          </div>
        </div>
        <div v-if="formData.formId == '6'">
          <div class="leave_time">
            <div class="out_title">
              <span class="text">加班开始时间</span>
            </div>
            <div class="cell" @click="leaveTime('4')">
              <van-cell :value="formData.startOverTime ? formData.startOverTime : '年/月/日'" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">加班结束时间</span>
            </div>
            <div class="cell" @click="leaveTime('5')">
              <van-cell :value="formData.endOverTime ? formData.endOverTime : '年/月/日'" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">调休开始时间</span>
            </div>
            <div class="cell" @click="leaveTime('1')">
              <van-cell :value="formData.startTime ? formData.startTime : '年/月/日'" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">调休结束时间</span>
            </div>
            <div class="cell" @click="leaveTime('2')">
              <van-cell :value="formData.endTime ? formData.endTime : '年/月/日'" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="leave_title">
              <span class="text">调休事由</span>
            </div>
            <div class="out_field">
              <van-cell-group>
                <van-field
                  v-model="formData.reason"
                  placeholder="请输入相关内容"
                  show-word-limit
                  maxlength="100"
                  type="textarea"
                  rows="3"
                  autosize />
              </van-cell-group>
            </div>
          </div>
          <div class="img_div">
            <ImgUpload titleWord="附件：" :showtips="false" v-bind:albumList.sync="formData.enclosureList" />
          </div>
        </div>
        <div v-if="formData.formId == '7'">
          <div class="leave_time">
            <div class="leave_title">
              <span class="text">出行范围</span>
            </div>
            <div class="style_btn">
              <van-radio-group v-model="formData.remark1" direction="horizontal">
                <van-radio name="出市" icon-size="15px">出市</van-radio>
                <van-radio name="出省" icon-size="15px">出省</van-radio>
                <van-radio name="出国" icon-size="15px">出国</van-radio>
              </van-radio-group>
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">原单位是否同意</span>
            </div>
            <div class="style_btn">
              <van-radio-group v-model="formData.isOrganAgree" direction="horizontal">
                <van-radio name="1" icon-size="15px">是</van-radio>
                <van-radio name="0" icon-size="15px">否</van-radio>
              </van-radio-group>
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">出行目的地</span>
            </div>
            <div class="cell">
              <van-cell-group :border="false">
                <van-field
                  v-model="formData.outDest"
                  placeholder="请输入"
                  type="text"
                  input-align="right"
                  maxlength="20" />
              </van-cell-group>
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">是否中高风险区</span>
            </div>
            <div class="style_btn">
              <van-radio-group v-model="formData.isRiskZone" direction="horizontal">
                <van-radio name="1" icon-size="15px">是</van-radio>
                <van-radio name="0" icon-size="15px">否</van-radio>
              </van-radio-group>
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">出行时间</span>
            </div>
            <div class="cell" @click="leaveTime('1')">
              <van-cell :value="formData.startTime ? formData.startTime : '年/月/日'" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">返回时间</span>
            </div>
            <div class="cell" @click="leaveTime('2')">
              <van-cell :value="formData.endTime ? formData.endTime : '年/月/日'" is-link />
            </div>
          </div>
          <div class="leave_time">
            <div class="out_title">
              <span class="text">出行天数</span>
            </div>
            <div class="cell">
              <van-cell :value="formData.regDays + '天'" />
            </div>
          </div>
          <div class="img_div">
            <ImgUpload titleWord="附件：" :showtips="false" v-bind:albumList.sync="formData.enclosureList" />
          </div>
        </div>
      </div>

      <!-- 底部提交按钮 -->
      <!-- 底部 -->
      <div class="fead_boot">
        <div class="btn_li" @click="submitOut()">提交</div>
        <div v-if="formData.canRevoke == '1'" class="btn_li" @click="btnBack()">撤回</div>
        <div v-if="formData.isCanZZ == '1'" class="btn_li" @click="endOut()">终止</div>
      </div>
    </div>
    <!-- 出勤登记日期选择弹出层 -->
    <van-popup v-model="showTimes" position="bottom">
      <van-datetime-picker
        v-model="currentDateStart"
        title="请选择时间"
        type="datetime"
        :min-date="minDate"
        @cancel="showTimes = false"
        @confirm="SEConfirm" />
    </van-popup>

    <van-popup v-model="showDays" position="bottom">
      <div class="pop_days">
        <van-datetime-picker
          :class="{ pop_days_left: formData.leaveId == '5' || formData.leaveId == '24' }"
          v-model="currentDays"
          type="date"
          :min-date="minDate"
          @cancel="showDays = false"
          @confirm="daysConfirm" />
        <!-- <van-picker class="pop_days_right" v-if="formData.leaveId == '5' || formData.leaveId == '24'" :columns="columns" @change="onChange" /> -->
        <div class="pop_days_right" v-if="formData.leaveId == '5' || formData.leaveId == '24'">
          <van-radio-group v-model="checkedTime" @change="onChange">
            <van-radio :name="item" v-for="(item, index) in columns" :key="index">
              <template #icon="props">
                <div :class="['option', { active: props.checked }]">{{ item }}</div>
              </template>
            </van-radio>
          </van-radio-group>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="showTime" position="bottom">
      <div class="pop_days">
        <van-datetime-picker v-model="currentTime" type="time" @cancel="showTime = false" @confirm="timeConfirm" />
      </div>
    </van-popup>

    <van-dialog
      v-model="tipsDisShow"
      title="提示"
      show-cancel-button
      class="tip_dialog"
      @confirm="onConfirm"
      @cancel="tipsDisShow = false">
      <div class="push_dia_box">
        <p class="push_dia_box_content">
          <van-icon class="icon_warn" name="warning" />
          您确定要提交表单吗？
        </p>
        <!-- <p class="push_dia_box_content warning">（工作时间内请假、公务外出的，请于离岗前、返回岗位后在考勤机打卡）</p> -->
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import MyNavBar from '@com/MyNavBar'
import ImgUpload from '@com/ImgUpload'
import moment from 'moment'
import {
  getRegInfo,
  listAttendanceLeaveType,
  addAttendanceDaily,
  getValidByTimeZone,
  updateAttendanceDaily,
  getAttendanceDailyInfo,
  updateAttendanceDailyStatus,
  getAttendanceRoleAndStandard,
} from '@api/api-attendance.js'
import { phoneReg } from '@common/regExps.js'
export default {
  name: 'addOutDuty',
  components: {
    MyNavBar,
    ImgUpload,
  },
  data() {
    return {
      columns: ['上午', '下午'],
      days: {
        startDays: '',
        endDays: '',
        morNing: '上午',
        afterNoon: '下午',
        nurseTime: '上午',
        selfTime: '',
      },
      moment: moment,
      userInfo: JSON.parse(localStorage.userInfo),
      formTitle: '',
      LeaveOption: [],
      leaveType: '',
      formData: {
        formId: '',
        writeTime: '',
        userName: JSON.parse(localStorage.userInfo).userName,
        orgName: JSON.parse(localStorage.userInfo).loginPostInfo.orgName,
        mobile: '',
        leaveId: '',
        leaveName: '',
        remark1: '',
        remark: '',
        startTime: '',
        endTime: '',
        reason: '',
        replaceName: '',
        replaceMobile: '',
        enclosureList: [],
        regDays: 0,
        regHours: 0,
        calendarDays: 0,
        regStatus: '',
        extentName: '',
        extentType: '',
        startOverTime: '',
        endOverTime: '',
        backTime: '',
        overHours: '',
        status: '',
        selfTime: '',
        backEnclosureList: [],
      },
      loading: false,
      finished: false,
      showTimes: false, //显示请假时间
      showDays: false, //显示天
      minDate: new Date(2023, 0, 1), // 最小限制时间
      currentDate: new Date(), // 当前时间
      currentDateStart: new Date(), // 当前时间
      currentDateEnd: new Date(), // 当前时间
      currentDays: new Date(), //日期
      timeStatus: '1', //1开始时间，2结束时间，3销假时间
      formTypes: '',
      userInfo: JSON.parse(localStorage.userInfo),
      showFile: '1',
      tipsDisShow: false,
      dialogType: '',
      workTime: [],
      showTime: false,
      currentTime: '',
      isFirst: false,
      checkedTime: '上午',
      workId: '0', // 0机关1窗口
      leaveIdList: ['3', '4', '6', '7', '21', '22', '25', '29'], // <!-- 22丧假,3婚假,4产假,21陪产假,6探亲假,25哺乳假,29独生子女护理假,7围保假-->
    }
  },
  watch: {},
  computed: {
    ...mapGetters('role', ['isOtherRole', 'isNormalRole', 'isAdminRole', 'isMainRole', 'isOrgRole', 'isPartRole']),
  },
  created() {
    if (this.isOrgRole) {
      this.showFile = '2'
    }
    this.formData.formId = this.$route.query.formId
    if (this.formData.formId == '5' || this.formData.formId == '1') {
      this.getWorkTime()
    }
    this.timeNow()
    this.listLeaveType()
    this.getRegInfo()
  },
  mounted() {
    if (this.$route.query.id) {
      this.isFirst = true
      this.getDetail()
    } else {
      if (this.formData.formId != '4' && this.formData.formId != '7') {
        this.formTitle = this.$route.query.title.substring(0, this.$route.query.title.length - 1)
      } else {
        this.formTitle = this.$route.query.title
      }
    }
  },
  methods: {
    menuData(status) {
      switch (status) {
        case '0':
          return '审批中'
          break
        case '1':
          return '通过'
          break
        case '2':
          return '不通过'
          break
        case '3':
          return '已退回'
          break
        case '4':
          return '已撤回'
          break
        case '5':
          return '已终止'
          break
        default:
          break
      }
    },
    goback() {
      this.formData = {}
      this.$router.go(-1)
      // if (this.$route.query.title == '销假单') {
      //   this.$router.push('/outdutyNew')
      // } else {
      //   this.$router.go(-1)
      // }
    },
    // 时间选择
    SEConfirm(value) {
      if (this.timeStatus == '1') {
        this.formData.startTime = moment(value).format('YYYY-MM-DD HH:mm')
      } else if (this.timeStatus == '2') {
        this.formData.endTime = moment(value).format('YYYY-MM-DD HH:mm')
      } else if (this.timeStatus == '3') {
        this.formData.backTime = moment(value).format('YYYY-MM-DD HH:mm')
        if (moment(this.formData.backTime).diff(moment(this.formData.startTime), 'minutes') <= 0) {
          this.$toast.fail('销假时间必须大于请假开始时间')
          this.formData.backTime = ''
          return
        }
      } else if (this.timeStatus == '4') {
        this.formData.startOverTime = moment(value).format('YYYY-MM-DD HH:mm')
      } else if (this.timeStatus == '5') {
        this.formData.endOverTime = moment(value).format('YYYY-MM-DD HH:mm')
      }
      this.showTimes = false
      if (this.timeStatus !== '3') {
        if (this.formData.startTime && this.formData.endTime && this.formData.formId !== '5') {
          this.checkAttendanceTime(0)
        } else if (this.formData.startTime && this.formData.formId == '5') {
          this.checkAttendanceTime(0)
        } else if (this.formData.startOverTime && this.formData.endOverTime) {
          this.checkAttendanceTime(1)
        }
      }
    },
    // 开始结束时间
    leaveTime(timeStatus) {
      if (this.formData.formId == '1' && this.formData.leaveId == '') {
        this.$toast.fail('请先选择请假类型')
        return
      }
      if (timeStatus == '1') {
        let st = this.days.startDays || this.formData.startTime || new Date()
        this.currentDays = moment(st).toDate()
        this.checkedTime = this.days.morNing || ''
      }
      if (timeStatus == '2') {
        if (!this.formData.startTime) {
          this.$toast.fail('请先选择开始时间')
          return
        }
        let et = this.days.endDays || this.formData.endTime || new Date()
        this.currentDays = moment(et).toDate()
        this.checkedTime = this.days.afterNoon || ''
      }
      this.timeStatus = timeStatus
      if (
        ((this.timeStatus == '1' || this.timeStatus == '2') &&
          this.formData.formId != '2' &&
          [...this.leaveIdList, '5', '24'].includes(this.formData.leaveId)) ||
        (this.formData.formId == '5' && timeStatus == '1')
      ) {
        this.showDays = true
      } else if (timeStatus == '3') {
        this.showTimes = true
      } else {
        this.showTimes = true
      }
    },
    //按天请假
    daysConfirm(value) {
      if (this.timeStatus == '1') {
        this.days.startDays = moment(value).format('YYYY-MM-DD')
        if (this.formData.leaveId == '5' || this.formData.leaveId == '24') {
          if (this.days.morNing == '上午') {
            this.formData.startTime = moment(this.days.startDays).format('YYYY-MM-DD 08:00:00')
          } else if (this.days.morNing == '下午') {
            this.formData.startTime =
              this.workId === '0'
                ? moment(this.days.startDays).format('YYYY-MM-DD 12:00:00')
                : moment(this.days.startDays).format('YYYY-MM-DD 13:00:00')
          }
        } else if (this.formData.leaveId == '25') {
          if (this.days.nurseTime == '上午') {
            this.formData.startTime = moment(this.days.startDays).format('YYYY-MM-DD 08:00:00')
          } else if (this.days.nurseTime == '下午') {
            this.formData.startTime = moment(this.days.startDays).format('YYYY-MM-DD 17:00:00')
          }
        } else if (this.formData.formId == '5') {
          this.formData.startTime = moment(value).format('YYYY-MM-DD')
        } else {
          this.formData.startTime = moment(this.days.startDays).format('YYYY-MM-DD 08:00:00')
        }
      } else if (this.timeStatus == '2') {
        this.days.endDays = moment(value).format('YYYY-MM-DD')
        if (this.formData.leaveId == '5' || this.formData.leaveId == '24') {
          if (this.days.afterNoon == '上午') {
            this.formData.endTime =
              this.workId === '0'
                ? moment(this.days.endDays).format('YYYY-MM-DD 12:00:00')
                : moment(this.days.endDays).format('YYYY-MM-DD 13:00:00')
          } else if (this.days.afterNoon == '下午') {
            this.formData.endTime = moment(this.days.endDays).format('YYYY-MM-DD 18:00:00')
          }
        } else if (this.formData.leaveId == '25') {
          if (this.days.nurseTime == '上午') {
            this.formData.endTime = moment(this.days.endDays).format('YYYY-MM-DD 09:00:00')
          } else if (this.days.nurseTime == '下午') {
            this.formData.endTime = moment(this.days.endDays).format('YYYY-MM-DD 18:00:00')
          }
        } else {
          this.formData.endTime = moment(this.days.endDays).format('YYYY-MM-DD 18:00:00')
        }
      }
      if (this.formData.startTime && this.formData.endTime) {
        this.checkAttendanceTime(0)
      }
      this.showDays = false
    },

    onChange() {
      if (this.timeStatus == '1') {
        this.days.morNing = this.checkedTime
      } else {
        this.days.afterNoon = this.checkedTime
      }
    },

    // 登记日期判断
    checkAttendanceTime(status) {
      let endTime = ''
      let startTime = ''
      let formType = ''
      if (status == 0 || status == 2 || status == 4) {
        if (this.formData.formId == '5') {
          startTime = moment(this.formData.startTime).format('YYYY-MM-DD') + ' ' + this.days.selfTime + ':00'
          endTime = ''
        } else {
          endTime = moment(this.formData.endTime).format('YYYY-MM-DD HH:mm:ss')
          startTime = moment(this.formData.startTime).format('YYYY-MM-DD HH:mm:ss')
        }

        formType = this.formData.formId
      } else if (status == 1 || status == 3 || status == 5) {
        endTime = moment(this.formData.endOverTime).format('YYYY-MM-DD HH:mm:ss')
        startTime = moment(this.formData.startOverTime).format('YYYY-MM-DD HH:mm:ss')
        formType = '0'
      }
      getValidByTimeZone({
        id: this.formData.id || '',
        endTime: endTime,
        leaveType: this.formData.leaveId,
        formType: formType,
        startTime: startTime,
        overTimeHours: this.formData.overHours,
      }).then(res => {
        if (res.data.tips === 606) {
          this.$dialog
            .alert({
              title: '提示',
              message: res.message,
            })
            .then(() => {})
        } else {
          if (res.status !== 200) return
          if (status == 1) {
            this.formData.overHours = res.data.hours
            this.formData.regStatus = res.data.regStatus
          } else {
            this.formData.regDays = res.data.days
            this.formData.regHours = res.data.hours
            this.formData.regStatus = res.data.regStatus
            this.formData.calendarDays = res.data.calendarDays
          }
          if (status === 2) {
            if (this.formData.formId == 1 || this.formData.formId == 2) {
              this.dialogType = 'add'
              this.tipsDisShow = true
            } else {
              this.submitSure()
            }
          } else if (status == 3) {
            this.checkAttendanceTime(2)
          } else if (status == 4) {
            this.updateData(status)
          } else if (status == 5) {
            this.checkAttendanceTime(4)
          }
        }
      })
    },
    // 登记列表提交
    submitOut() {
      if (!this.formData.mobile || !phoneReg.test(this.formData.mobile)) {
        this.$toast.fail('请检测您的联系电话是否正确')
        return
      }
      if (
        (this.formData.formId == '1' ||
          this.formData.formId == '2' ||
          this.formData.formId == '3' ||
          this.formData.formId == '5') &&
        !this.formData.leaveId
      ) {
        this.$toast.fail('请选择所属类型')
        return
      }
      if (this.formData.formId !== '5' && (!this.formData.startTime || !this.formData.endTime)) {
        this.$toast.fail('请检测您的时间是否选择完整')
        return
      }
      if (
        (this.formData.formId == '4' || this.formData.formId == '6') &&
        (!this.formData.startOverTime || !this.formData.endOverTime)
      ) {
        this.$toast.fail('请检测您的时间是否选择完整')
        return
      }
      if (this.formData.formId !== '7' && !this.formData.reason) {
        this.$toast.fail('请填写您的事由/原因')
        return
      }
      if (this.formData.formId == '5' && !this.formData.startTime) {
        this.$toast.fail('请选择补卡日期')
        return
      }
      if (this.formData.formId == '5' && !this.days.selfTime) {
        this.$toast.fail('请选择补卡时间')
        return
      }
      if (this.formData.formId == '3' && !this.formData.backTime) {
        this.$toast.fail('请选择销假时间')
        return
      }
      if (
        this.formData.formId == '3' &&
        this.formData.leaveId == '2' &&
        this.formData.enclosureList.length === 0 &&
        this.formData.backEnclosureList.length === 0
      ) {
        this.$toast.fail('请上传附件')
        return
      }
      if (this.showFile == '2' && this.formData.leaveId == '24' && this.formData.enclosureList.length == 0) {
        this.$toast.fail('请上传附件')
        return
      }
      //出行报备
      if (this.formData.formId == '7') {
        if (!this.formData.remark1) {
          this.$toast.fail('请选择出行范围')
          return
        }
        if (!this.formData.isOrganAgree) {
          this.$toast.fail('请选择原单位是否同意')
          return
        }
        if (!this.formData.outDest) {
          this.$toast.fail('请填写出行目的地')
          return
        }
        if (!this.formData.isRiskZone) {
          this.$toast.fail('请勾选是否中高风险区')
          return
        }
        if (this.formData.enclosureList.length == 0) {
          this.$toast.fail('请上传附件')
          return
        }
      }

      this.formData.startTime = this.formData.startTime
        ? moment(this.formData.startTime).format('YYYY-MM-DD HH:mm:ss')
        : ''
      this.formData.endTime = this.formData.endTime ? moment(this.formData.endTime).format('YYYY-MM-DD HH:mm:ss') : ''
      this.formData.startOverTime = this.formData.startOverTime
        ? moment(this.formData.startOverTime).format('YYYY-MM-DD HH:mm:ss')
        : ''
      this.formData.endOverTime = this.formData.endOverTime
        ? moment(this.formData.endOverTime).format('YYYY-MM-DD HH:mm:ss')
        : ''
      this.formData.backTime = this.formData.backTime
        ? moment(this.formData.backTime).format('YYYY-MM-DD HH:mm:ss')
        : ''

      let status = 2
      if (this.$route.query.id && this.$route.query.title == '销假单') {
        this.submitSure()
        return
      } else if (this.$route.query.id && this.$route.query.title !== '销假单') {
        if (this.$route.query.formId == '3' || this.$route.query.formId == '5') {
          this.updateData()
          return
        } else {
          status = 4
        }
      } else {
        status = 2
      }

      if (this.formData.remark1 == '出市' || this.formData.remark1 == '出省' || this.formData.remark1 == '出国') {
        this.formData.extentName = this.formData.remark1
        this.formData.extentType = this.formData.remark1 == '出市' ? '1' : this.formData.remark1 == '出省' ? '0' : '2'
      } else {
        this.formData.extentType = '3'
      }

      if (
        this.formData.formId == '1' ||
        this.formData.formId == '2' ||
        this.formData.formId == '5' ||
        this.formData.formId == '7'
      ) {
        this.checkAttendanceTime(status)
      } else if ((this.formData.formId == '4' || this.formData.formId == '6') && status == 2) {
        this.checkAttendanceTime(3)
      } else if ((this.formData.formId == '4' || this.formData.formId == '6') && status == 4) {
        this.checkAttendanceTime(5)
      } else {
        this.submitSure()
      }
    },

    //终止
    endOut() {
      this.$dialog
        .confirm({
          message: '您确定要终止表单吗？',
        })
        .then(() => {
          updateAttendanceDailyStatus({
            content: '',
            dailyId: this.formData.id,
            formId: this.formData.formId,
            status: '5',
            processInstanceId: this.$route.query.processInstanceId,
            taskId: this.$route.query.taskId,
          }).then(res => {
            if (res.status === 200) {
              this.$toast.success('提交成功')
              setTimeout(() => {
                this.formData = {}
                this.$router.go(-1)
              }, 500)
            } else {
              this.$dialog
                .alert({
                  message: res.message,
                })
                .then(() => {})
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },

    // 提交弹框确认
    submitSure() {
      this.$dialog
        .confirm({
          message: '您确定要提交表单吗？',
        })
        .then(() => {
          if (this.formData.formId == 5) {
            this.formData.startTime =
              moment(this.formData.startTime).format('YYYY-MM-DD') + ' ' + this.days.selfTime + ':00'
            this.formData.endTime = ''
          }
          let params = {}
          if (this.formData.formId == '3') {
            const data = {
              enclosureList: this.formData.backEnclosureList,
              leaveEnclosureList: this.formData.enclosureList,
            }
            params = Object.assign({ ...this.formData }, { ...data })
          } else {
            params = { ...this.formData }
          }
          addAttendanceDaily(params).then(res => {
            if (res.status === 200) {
              this.$toast.success('提交成功')
              if (this.$route.query.title == '销假单' || this.formData.formId == '3') {
                setTimeout(() => {
                  // this.$router.push('/outdutyNew')
                  this.$router.go(-1)
                }, 1000)
              } else {
                setTimeout(() => {
                  this.formData = {}
                  this.$router.go(-1)
                }, 900)
              }
            } else {
              this.$dialog
                .alert({
                  message: res.message,
                })
                .then(() => {})
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    // 获取当前时间
    timeNow() {
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let m1 = m < 10 ? '0' + m : m
      let d1 = d < 10 ? '0' + d : d
      this.dutyYear = String(y)
      this.dutyMonth = String(m)
      this.chooseTime = String(y) + '年' + String(m) + '月'
      this.dutyTime = String(y) + '年' + String(m) + '月'
      this.formData.writeTime = moment().format('YYYY-MM-DD HH:mm')
      this.listTime = String(y) + '-' + String(m1)
    },
    // 查询请假类型
    listLeaveType() {
      listAttendanceLeaveType({
        formTypeId: this.formData.formId,
        leaveType: '1',
      }).then(res => {
        if (res.status === 200) {
          res.data.forEach((item, index) => {
            this.LeaveOption.push({ text: item.typeName, value: index, id: item.id })
          })
        }
      })
    },
    // 查询用户详情
    getRegInfo() {
      getRegInfo({ id: this.userInfo.userId }).then(res => {
        if (res.status === 200) {
          this.formData.mobile = res.data.phone
        }
      })
    },

    // 下拉框类型切换
    dropdownChange(type) {
      if (this.leaveType === 0 || this.leaveType > 0) {
        if (this.formData.leaveName === this.LeaveOption[this.leaveType].text) return
        this.formData.leaveName = this.LeaveOption[this.leaveType].text
        this.formData.leaveId = this.LeaveOption[this.leaveType].id
        this.currentDateStart = new Date()
        if (type == '0') {
          this.formData.startTime = ''
          this.formData.endTime = ''
          this.days.startDays = ''
          this.days.endDays = ''
          this.timeStatus = '1'
        }
      }
    },
    // 备注变更
    btnChanges() {
      this.remarkChange = true
    },

    linkDutyCli() {
      this.$router.replace({ path: '/outDutyLink' })
    },

    //获取详情
    getDetail() {
      getAttendanceDailyInfo({
        id: this.$route.query.id,
        formId: this.$route.query.formId,
      }).then(res => {
        if (res.status === 200) {
          let data = res.data
          if (this.formData.formId == 5) {
            let arr = data.startTime.split(' ')
            data.startTime = arr[0]
            let selfTime = arr[1]
            this.days.selfTime = selfTime.slice(0, 5)
            this.currentTime = selfTime.slice(0, 5)
            if (this.workTime.includes(selfTime.slice(0, 5))) {
              data.selfTime = selfTime.slice(0, 5)
            } else {
              data.selfTime = 'self'
            }
          }
          let backData = {}
          if (this.formData.formId === '3') {
            backData = {
              enclosureList: data.leaveEnclosureList,
              backEnclosureList: data.enclosureList,
            }
          }
          this.formData = Object.assign(this.formData, { ...data }, { ...backData })
          this.formData.writeTime = moment(this.formData.createTime).format('YYYY-MM-DD HH:mm')
          this.formData.userName = this.formData.createBy
          if (this.formData.extentName) {
            if (this.formData.extentName == '出市' || this.formData.extentName == '出国') {
              this.$set(this.formData, 'remark1', this.formData.extentName)
              this.$set(this.formData, 'extentName', '')
            } else {
              this.$set(this.formData, 'remark1', '其他')
            }
          }
          if (this.$route.query.title == '销假单') {
            this.formData.dailyId = this.formData.id
            this.formData.formId = '3'
          }
          if (
            (this.formData.formId == '1' || this.formData.formId == '3') &&
            [...this.leaveIdList, '5', '24'].includes(this.formData.leaveId)
          ) {
            this.days.startDays = moment(this.formData.startTime).format('YYYY-MM-DD')
            this.days.endDays = moment(this.formData.endTime).format('YYYY-MM-DD')
            if (this.formData.leaveId == '5' || this.formData.leaveId == '24') {
              if (moment(this.formData.startTime).format('HH:mm:ss') == '08:00:00') {
                this.days.morNing = '上午'
              } else if (
                moment(this.formData.startTime).format('HH:mm:ss') == '12:00:00' ||
                moment(this.formData.startTime).format('HH:mm:ss') == '13:00:00'
              ) {
                this.days.morNing = '下午'
              }
              if (
                moment(this.formData.endTime).format('HH:mm:ss') == '12:00:00' ||
                moment(this.formData.endTime).format('HH:mm:ss') == '13:00:00'
              ) {
                this.days.afterNoon = '上午'
              } else if (moment(this.formData.endTime).format('HH:mm:ss') == '18:00:00') {
                this.days.afterNoon = '下午'
              }
            }
            if (this.formData.leaveId === '25') {
              if (moment(this.formData.startTime).format('HH:mm:ss') == '08:00:00') {
                this.days.nurseTime = '上午'
              } else if (moment(this.formData.startTime).format('HH:mm:ss') == '17:00:00') {
                this.days.nurseTime = '下午'
              }
            }
          } else if (
            this.formData.formId == '3' &&
            (this.formData.leaveId == '1' || this.formData.leaveId == '2' || this.formData.leaveId == '7')
          ) {
            this.days.startDays = moment(this.formData.startTime).format('YYYY-MM-DD HH:mm')
            this.days.endDays = moment(this.formData.endTime).format('YYYY-MM-DD HH:mm')
          } else {
            this.formData.startTime = moment(this.formData.startTime).format('YYYY-MM-DD HH:mm')
            this.formData.endTime = moment(this.formData.endTime).format('YYYY-MM-DD HH:mm')
          }
        }
      })
    },
    updateData() {
      if (this.formData.formId == 1 || this.formData.formId == 2) {
        this.dialogType = 'update'
        this.tipsDisShow = true
      } else {
        if (this.formData.formId == 5) {
          this.formData.startTime =
            moment(this.formData.startTime).format('YYYY-MM-DD') + ' ' + this.days.selfTime + ':00'
          this.formData.endTime = ''
        }
        this.formData.processInstanceId = this.$route.query.processInstanceId
        this.formData.taskId = this.$route.query.taskId
        updateAttendanceDaily(this.formData).then(res => {
          if (res.status === 200) {
            this.$toast.success('提交成功')
            if (this.$route.query.title == '销假单') {
              setTimeout(() => {
                // this.$router.push('/outdutyNew')
                this.$router.go(-1)
              }, 1000)
            } else {
              setTimeout(() => {
                this.formData = {}
                this.$router.go(-1)
              }, 900)
            }
          }
        })
      }
    },
    nurseChaneg() {
      if (this.days.nurseTime == '上午') {
        if (this.days.startDays) {
          this.formData.startTime = moment(this.days.startDays).format('YYYY-MM-DD 08:00:00')
        }
        if (this.days.endDays) {
          this.formData.endTime = moment(this.days.endDays).format('YYYY-MM-DD 09:00:00')
        }
      } else if (this.days.nurseTime == '下午') {
        if (this.days.startDays) {
          this.formData.startTime = moment(this.days.startDays).format('YYYY-MM-DD 17:00:00')
        }
        if (this.days.endDays) {
          this.formData.endTime = moment(this.days.endDays).format('YYYY-MM-DD 18:00:00')
        }
      }
      if (this.formData.startTime && this.formData.endTime) {
        this.checkAttendanceTime(0)
      }
    },
    onConfirm() {
      if (this.dialogType === 'update') {
        this.formData.processInstanceId = this.$route.query.processInstanceId
        this.formData.taskId = this.$route.query.taskId
        updateAttendanceDaily(this.formData).then(res => {
          if (res.status === 200) {
            this.$toast.success('提交成功')
            setTimeout(() => {
              this.formData = {}
              this.$router.go(-1)
            }, 900)
          }
        })
      } else {
        addAttendanceDaily(this.formData).then(res => {
          if (res.status === 200) {
            this.$toast.success('提交成功')
            setTimeout(() => {
              this.formData = {}
              this.$router.go(-1)
            }, 900)
          } else {
            this.$dialog
              .alert({
                message: res.message,
              })
              .then(() => {})
          }
        })
      }
      this.tipsDisShow = false
    },
    //获取工作时间
    getWorkTime() {
      getAttendanceRoleAndStandard({}).then(res => {
        let data = res.data.attendanceStandard
        this.workTime = data.split('-')
        if (data.indexOf('08:00') != -1) {
          this.workId = '0'
        } else {
          this.workId = '1'
        }
      })
    },
    supplementaryChaneg() {
      if (this.isFirst) {
        return (this.isFirst = false)
      }
      if (this.formData.selfTime == this.workTime[0]) {
        this.days.selfTime = this.workTime[0]
      } else if (this.formData.selfTime == this.workTime[1]) {
        this.days.selfTime = this.workTime[1]
      } else if (this.formData.selfTime == 'self') {
        if (!this.currentTime) {
          this.currentTime = moment().format('HH:mm')
        }
        this.days.selfTime = this.currentTime
      }
      if (this.days.selfTime && this.formData.startTime) {
        this.checkAttendanceTime(0)
      }
    },
    timeConfirm(value) {
      this.days.selfTime = value
      if (this.days.selfTime && this.formData.startTime) {
        this.checkAttendanceTime(0)
      }
      this.showTime = false
    },
    btnBack() {
      this.$dialog
        .confirm({
          message: '您确定要撤回表单吗？',
        })
        .then(() => {
          updateAttendanceDailyStatus({
            content: '',
            dailyId: this.formData.id,
            formId: this.formData.formId,
            status: '4',
            processInstanceId: this.$route.query.processInstanceId,
            taskId: this.$route.query.taskId,
          }).then(res => {
            if (res.status === 200) {
              this.$toast.success('提交成功')
              setTimeout(() => {
                this.formData = {}
                this.$router.go(-1)
              }, 500)
            } else {
              this.$dialog
                .alert({
                  message: res.message,
                })
                .then(() => {})
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.out_add {
  /deep/ .van-popup {
    position: absolute;
  }
  .pop_days {
    .pop_days_left {
      /deep/ .van-picker__columns {
        width: 80%;
      }
    }
    .pop_days_right {
      // position: absolute;
      // right: 30px;
      // top: 30px;
      position: absolute;
      right: 0;
      top: 55%;
      transform: translateY(-50%);
      font-size: 16px;
      width: 20%;
      text-align: center;
      color: #999999;
      /deep/.van-radio {
        justify-content: center;
        margin: 20px 0;
        .van-radio__icon {
          width: 60%;
        }
      }
      .option {
        width: 100%;
        height: 100%;
        font-size: 12px;
        color: #999999;
        background-color: #f7f7f7;
        display: flex;
        justify-content: center;
        align-items: center;
        &.active {
          background-image: linear-gradient(0deg, #c1a36f 0%, #e5cca0 100%);
          color: #fff;
        }
      }
    }
  }
}
.outduty {
  padding: 8px 12px 70px;
  background-color: #f7f7f7;
  font-size: 13px;
  color: #333333;
  width: 100%;
  .result_hint {
    width: 100%;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    background-color: rgba(230, 127, 43, 0.1);
    .r_btn_success {
      color: #67c23a;
    }
    .r_btn_primary {
      color: #ee792f;
    }
    .r_btn_red {
      color: #f56c6c;
    }
  }
  .img_div {
    border-bottom: 1px solid #efefef;
  }
  .self_title_bold {
    // font-size: 14px;
    color: #333333;
    font-weight: bold;
  }
  .out_title,
  .leave_title {
    font-size: 13px;
    color: #333;
    margin-bottom: 10px;
    .text {
      background-image: linear-gradient(#ffffff 50%, #f9f1e8);
    }
  }
  .style_btn {
    /deep/.van-radio {
      margin: 0 5px;
      display: flex;
      align-items: center;
    }
  }
  .self_info {
    width: 100%;
    background-color: #ffffff;
    padding: 10px 20px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    .correlation_info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 0;
      border-bottom: 1px solid #efefef;
      .left {
        font-size: 13px;
      }
      /deep/.van-cell {
        font-size: 12px;
      }
    }
  }
  .register_info {
    width: 100%;
    background-color: #ffffff;
    padding: 10px 20px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    margin-top: 10px;
    position: relative;
    .leave_time {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #efefef;
      // position: relative;
      .out_title {
        margin-bottom: 0;
        margin-right: 10px;
      }
      .cell_add {
        /deep/.van-cell__value {
          text-align: right;
          padding-right: 10px;
          color: #cba76d;
        }
      }
      .cell {
        flex: 1;
        /deep/.van-cell {
          display: flex;
          align-items: center;
          font-size: 12px;
          .van-icon-arrow {
            display: flex;
            align-items: center;
          }
        }
        /deep/.van-cell__value {
          text-align: right;
          padding-right: 10px;
          color: #999999;
        }
        /deep/.van-dropdown-menu {
          width: 100%;
          .van-dropdown-menu__bar {
            height: 33px !important;
            background-color: transparent;
            box-shadow: none;
            padding-right: 15px;
            position: absolute;
            z-index: 99;
            opacity: 0;
            width: 105px;
            right: 0;
          }
          .van-dropdown-item {
            position: absolute;
            top: 62px !important;
            // top: 200px !important;
            height: 186px;
            width: 100%;
            overflow-y: scroll;
            .van-dropdown-item__content {
              max-height: 95%;
              box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.5);
              padding-bottom: 22px;
              .van-dropdown-item__option {
                padding: 6px 24px;
              }
            }
          }
          .van-popup {
            position: absolute;
          }
          .van-overlay {
            display: none;
          }
        }
        /deep/.van-radio-group {
          justify-content: flex-end;
        }
        /deep/.van-radio {
          margin: 0 5px;
          display: flex;
          align-items: center;
        }
        .cell_radio {
          display: flex;
          align-items: center;
        }
      }
      .leave_title {
        margin-bottom: 0;
        width: 32%;
      }
    }
    .out_field {
      width: 68%;
      /deep/ .van-cell-group {
        width: 100%;
        border: 1px solid #ebedf0;
        font-size: 12px;
      }
    }
    .supplementary_drop1 {
      .cell {
        /deep/.van-dropdown-menu {
          .van-dropdown-item {
            top: 150px !important;
          }
        }
      }
    }
    .supplementary_drop2 {
      .cell {
        /deep/.van-dropdown-menu {
          .van-dropdown-item {
            top: 200px !important;
          }
        }
      }
    }
    .duty_file {
      border-bottom: 1px solid #efefef;
      .duty_file_title {
        // font-size: 14px;
        color: #333;
        margin-top: 10px;
        span {
          background-image: linear-gradient(#ffffff 50%, #f9f1e8);
        }
      }
    }
    .add_tips {
      color: #909399;
      padding: 5px 0;
    }
  }
}
/deep/.tip_dialog {
  // font-size: 14px;
  .van-dialog__header {
    padding-top: 12px;
    font-weight: bold;
    font-size: 16px;
  }
  .van-dialog__content {
    padding: 16px 21px 20px;
    .push_dia_box_content {
      line-height: 2;
      .icon_warn {
        color: #ee792f;
        font-size: 14px;
      }
    }

    .push_dia_commit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      font-size: 14px;
      .van-checkbox {
        padding: 5px;
      }
      .van-checkbox__icon .van-icon {
        font-size: 16px;
      }
      .van-checkbox__icon--checked .van-icon {
        background-color: #ee0a24;
        border-color: #ee0a24;
      }
      .push_dia_commit_btn {
        color: #ee0a24;
        padding: 0 5px;
      }
    }
    .warning {
      color: #ee0a24;
      font-weight: bold;
    }
  }
}
</style>
